<template>
  <view class="section-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-left" @click="goBack">
        <image class="back-icon" src="/static/Images/shop/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="nav-bar-title">{{ sectionTitle }}</view>
      <view class="nav-bar-right"></view>
    </view>
    
    <!-- 专区头部 -->
    <view class="section-header" :style="{ backgroundImage: `url(${sectionBanner})` }">
      <view class="section-header-content">
        <text class="section-title">{{ sectionTitle }}</text>
        <text class="section-desc">{{ sectionDesc }}</text>
      </view>
    </view>
    
    <!-- 专区内容 -->
    <view class="section-content">
      <!-- 话费充值专区 -->
      <block v-if="type === 'phone'">
        <view class="phone-recharge">
          <view class="recharge-form">
            <view class="form-item">
              <text class="form-label">手机号码</text>
              <input type="number" class="form-input" placeholder="请输入手机号码" maxlength="11" v-model="phoneNumber" />
            </view>
            
            <view class="form-item">
              <text class="form-label">充值金额</text>
              <view class="amount-options">
                <view 
                  v-for="(amount, index) in rechargeAmounts" 
                  :key="index"
                  class="amount-option"
                  :class="{ active: selectedAmount === amount.value }"
                  @click="selectAmount(amount.value)"
                >
                  <text class="amount-value">{{ amount.value }}元</text>
                  <text class="amount-desc" v-if="amount.desc">{{ amount.desc }}</text>
                </view>
              </view>
            </view>
            
            <view class="recharge-button" @click="handleRecharge">
              立即充值
            </view>
            
            <view class="recharge-tips">
              <text class="tip-item">· 充值金额将在24小时内到账</text>
              <text class="tip-item">· 如有问题请联系客服</text>
            </view>
          </view>
          
          <view class="recharge-records">
            <view class="records-header">
              <text class="records-title">充值记录</text>
            </view>
            
            <view class="records-list">
              <view class="record-item" v-for="(record, index) in rechargeRecords" :key="index">
                <view class="record-info">
                  <text class="record-phone">{{ maskPhone(record.phone) }}</text>
                  <text class="record-time">{{ record.time }}</text>
                </view>
                <text class="record-amount">{{ record.amount }}元</text>
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 卡券回收专区 -->
      <block v-else-if="type === 'card'">
        <view class="card-recycle">
          <view class="card-types">
            <view 
              v-for="(cardType, index) in cardTypes" 
              :key="index"
              class="card-type-item"
              :class="{ active: selectedCardType === cardType.id }"
              @click="selectCardType(cardType.id)"
            >
              <image class="card-type-icon" :src="cardType.icon" mode="aspectFit"></image>
              <text class="card-type-name">{{ cardType.name }}</text>
            </view>
          </view>
          
          <view class="card-form">
            <view class="form-item">
              <text class="form-label">卡券面额</text>
              <view class="amount-options">
                <view 
                  v-for="(amount, index) in cardAmounts" 
                  :key="index"
                  class="amount-option"
                  :class="{ active: selectedCardAmount === amount.value }"
                  @click="selectCardAmount(amount.value)"
                >
                  <text class="amount-value">{{ amount.value }}元</text>
                </view>
              </view>
            </view>
            
            <view class="form-item">
              <text class="form-label">卡券数量</text>
              <view class="quantity-selector">
                <view class="quantity-btn" @click="decreaseQuantity">-</view>
                <input type="number" class="quantity-input" v-model="cardQuantity" />
                <view class="quantity-btn" @click="increaseQuantity">+</view>
              </view>
            </view>
            
            <view class="form-item">
              <text class="form-label">回收金额</text>
              <view class="recycle-amount">
                <text class="recycle-value">{{ calculateRecycleAmount() }}元</text>
                <text class="recycle-rate">(回收率: {{ getRecycleRate() }}%)</text>
              </view>
            </view>
            
            <view class="recycle-button" @click="handleRecycle">
              确认回收
            </view>
            
            <view class="recycle-tips">
              <text class="tip-item">· 回收金额将在1-3个工作日内到账</text>
              <text class="tip-item">· 请确保卡券未被使用且在有效期内</text>
              <text class="tip-item">· 如有问题请联系客服</text>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 默认内容 -->
      <block v-else>
        <view class="empty-state">
          <image class="empty-icon" src="/static/Images/shop/Kongzhuangtai.png" mode="aspectFit"></image>
          <text class="empty-text">暂无相关内容</text>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: '',
      // 话费充值相关数据
      phoneNumber: '',
      selectedAmount: 100,
      rechargeAmounts: [
        { value: 50, desc: '' },
        { value: 100, desc: '推荐' },
        { value: 200, desc: '' },
        { value: 300, desc: '优惠5元' },
        { value: 500, desc: '优惠10元' }
      ],
      rechargeRecords: [
        { phone: '13812345678', time: '2023-06-15 14:30', amount: 100 },
        { phone: '13987654321', time: '2023-06-15 13:25', amount: 50 },
        { phone: '13712345678', time: '2023-06-15 12:10', amount: 200 },
        { phone: '13612345678', time: '2023-06-15 10:45', amount: 300 }
      ],
      
      // 卡券回收相关数据
      selectedCardType: 1,
      cardTypes: [
        { id: 1, name: '话费卡', icon: '/static/Images/tesk/Huafei.png' },
        { id: 2, name: '购物卡', icon: '/static/Images/tesk/Card-roll.png' },
        { id: 3, name: '游戏卡', icon: '/static/Images/tesk/Haoquan.png' }
      ],
      selectedCardAmount: 100,
      cardAmounts: [
        { value: 50 },
        { value: 100 },
        { value: 200 },
        { value: 300 },
        { value: 500 }
      ],
      cardQuantity: 1
    }
  },
  computed: {
    sectionTitle() {
      if (this.type === 'phone') {
        return '话费官方充值';
      } else if (this.type === 'card') {
        return '卡券回收';
      } else {
        return '专区详情';
      }
    },
    sectionDesc() {
      if (this.type === 'phone') {
        return '快速充值，安全可靠';
      } else if (this.type === 'card') {
        return '高价回收，快速到账';
      } else {
        return '';
      }
    },
    sectionBanner() {
      if (this.type === 'phone') {
        return '/static/Images/tesk/Huafei.png';
      } else if (this.type === 'card') {
        return '/static/Images/tesk/Huishou.png';
      } else {
        return '';
      }
    }
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 话费充值相关方法
    selectAmount(value) {
      this.selectedAmount = value;
    },
    
    handleRecharge() {
      if (!this.phoneNumber || this.phoneNumber.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '确认充值',
        content: `确定为 ${this.phoneNumber} 充值 ${this.selectedAmount} 元吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '充值中...'
            });
            
            // 模拟充值过程
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '充值成功',
                icon: 'success'
              });
              
              // 添加充值记录
              const now = new Date();
              const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
              
              this.rechargeRecords.unshift({
                phone: this.phoneNumber,
                time: timeStr,
                amount: this.selectedAmount
              });
              
              // 清空输入
              this.phoneNumber = '';
            }, 2000);
          }
        }
      });
    },
    
    maskPhone(phone) {
      if (phone && phone.length === 11) {
        return phone.substring(0, 3) + '****' + phone.substring(7);
      }
      return phone;
    },
    
    // 卡券回收相关方法
    selectCardType(id) {
      this.selectedCardType = id;
    },
    
    selectCardAmount(value) {
      this.selectedCardAmount = value;
    },
    
    decreaseQuantity() {
      if (this.cardQuantity > 1) {
        this.cardQuantity--;
      }
    },
    
    increaseQuantity() {
      this.cardQuantity++;
    },
    
    calculateRecycleAmount() {
      const rate = this.getRecycleRate() / 100;
      return (this.selectedCardAmount * this.cardQuantity * rate).toFixed(2);
    },
    
    getRecycleRate() {
      // 不同类型卡券的回收率
      const rates = {
        1: 95, // 话费卡
        2: 90, // 购物卡
        3: 85  // 游戏卡
      };
      
      return rates[this.selectedCardType] || 90;
    },
    
    handleRecycle() {
      uni.showModal({
        title: '确认回收',
        content: `确定回收 ${this.cardQuantity} 张 ${this.selectedCardAmount} 元的卡券吗？回收金额为 ${this.calculateRecycleAmount()} 元。`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中...'
            });
            
            // 模拟回收过程
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '回收成功',
                icon: 'success'
              });
              
              // 重置表单
              this.cardQuantity = 1;
            }, 2000);
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.section-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #FFFFFF;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-bar-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-bar-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-bar-right {
  width: 60rpx;
}

/* 专区头部 */
.section-header {
  height: 300rpx;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
}

.section-header-content {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: 20rpx;
  display: block;
}

.section-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

/* 专区内容 */
.section-content {
  padding: 30rpx;
}

/* 话费充值专区 */
.phone-recharge {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.recharge-form {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.form-input {
  height: 80rpx;
  background-color: #F5F5F5;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.amount-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.amount-option {
  width: calc(33.33% - 14rpx);
  height: 100rpx;
  background-color: #F5F5F5;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.amount-option.active {
  background-color: rgba(255, 81, 81, 0.1);
  border: 2rpx solid #FF5151;
}

.amount-value {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.amount-desc {
  font-size: 22rpx;
  color: #FF5151;
  margin-top: 5rpx;
}

.recharge-button {
  height: 80rpx;
  background-color: #FF5151;
  color: #FFFFFF;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40rpx;
  margin-top: 30rpx;
}

.recharge-tips {
  margin-top: 20rpx;
}

.tip-item {
  font-size: 24rpx;
  color: #999;
  line-height: 1.6;
  display: block;
}

.recharge-records {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.records-header {
  margin-bottom: 20rpx;
}

.records-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #F5F5F5;
}

.record-item:last-child {
  border-bottom: none;
}

.record-info {
  display: flex;
  flex-direction: column;
}

.record-phone {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}

.record-amount {
  font-size: 30rpx;
  color: #FF5151;
  font-weight: bold;
}

/* 卡券回收专区 */
.card-recycle {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.card-types {
  display: flex;
  justify-content: space-between;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  padding: 20rpx 0;
  border-radius: 10rpx;
}

.card-type-item.active {
  background-color: rgba(255, 81, 81, 0.1);
}

.card-type-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.card-type-name {
  font-size: 26rpx;
  color: #333;
}

.card-form {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.quantity-selector {
  display: flex;
  align-items: center;
  height: 80rpx;
}

.quantity-btn {
  width: 80rpx;
  height: 80rpx;
  background-color: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.quantity-input {
  flex: 1;
  height: 80rpx;
  background-color: #F5F5F5;
  text-align: center;
  font-size: 28rpx;
  margin: 0 2rpx;
}

.recycle-amount {
  display: flex;
  align-items: baseline;
}

.recycle-value {
  font-size: 40rpx;
  color: #FF5151;
  font-weight: bold;
  margin-right: 10rpx;
}

.recycle-rate {
  font-size: 24rpx;
  color: #999;
}

.recycle-button {
  height: 80rpx;
  background-color: #FF5151;
  color: #FFFFFF;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40rpx;
  margin-top: 30rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>